<template>
  <div class="page_four">
    <Header title="我的"></Header>
    <div class="user_box">
      <div class="user_avatar">
        <img :src="userImage" alt="">
        <p>{{userNick}}</p>
      </div>
      <div class="login-btn" @click="goLogin">
        <img src="../../assets/Image/login.png" alt="">
      </div>
    </div>
    <div class="container">
      <Card title="我的网易云" icon="ios-options" :padding="0" shadow style="width: 100%;">
        <CellGroup>
          <!--extra: 右侧额外内容 label：标题下方描述信息-->
          <Cell title="关注列表" extra="关注列表" to="/Child4Page1"/>
          <Cell title="用户歌单" extra="用户歌单" to="/Child4Page2"/>
          <Cell title="发送私信" extra="发送私信" to="/Child4Page3"/>
          <Cell title="播放记录" extra="播放记录" to="/Child4Page4"/>
          <Cell title="歌手分类" extra="歌手分类" to="/Child4Page5"/>
          <Cell title="热门歌手" extra="热门歌手" to="/hotSinger"/>
          <Cell title="MV排行榜" extra="MV排行榜" to="/MVTOP"/>
          <Cell title="排行榜" extra="排行榜" to="/rankingList"/>
          <Cell title="练习页面" extra="练习页面" to="/exercisePage"/>
          <!--<Cell title="徽标显示" to="/">-->
            <!--<Badge :count="10" slot="extra" />-->
          <!--</Cell>-->
        </CellGroup>
      </Card>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '../footer/Footer'
import Header from '../Header/Header'
import {loadAvatarUrl, loadNickName, loadUserId} from '../../api/storage'

export default {
  name: 'PageFour',
  data () {
    return {
      userImage: loadAvatarUrl(),
      userNick: loadNickName()
    }
  },
  created () {
    if (!loadUserId()) {
      this.$router.push('/login')
    }
  },
  methods: {
    getCell (e) {
      console.log(e)
    },
    goLogin () {
      this.$router.push('/login')
    }
  },
  components: {
    Footer,
    Header
  }
}
</script>

<style lang="scss" scoped>
.page_four{
  width: 100%;
  padding-top: 50px;
  .user_box{
    width: 100%;
    background: url("http://p4.music.126.net/Ypy6DuNsM9dUDAi-daXjmg==/2540971374930594.jpg");
    background-position: center;
    padding: 20px 0;
    position: relative;
    .user_avatar{
      text-align: center;
      img{
        width: 60px;
        border: 1px solid #f2f2f2;
        border-radius: 50%;
      }
      p{
        font-size: 16px;
        color: #de1724;
        font-weight: bolder;
      }
    }
    .login-btn{
      position: absolute;
      top: 10px;
      right: 10px;
    }
  }
  .container{
    width: 100%;
  }
}
</style>
